@extends('admin::layouts.master')
@section('content')
    <ul role="tablist" class="nav nav-tabs">
        <li class="nav-item"><a href="/base/base_reply" class="nav-link">基本回复列表</a></li>
        <li class="nav-item"><a href="#" class="nav-link active">添加基本回复</a></li>
    </ul>
    <form action="/base/base_reply/{{$base_reply['id']}}" method="post">
        {!! $view !!}
        <div class="card" id="content">
            <div class="card-header">基本回复管理</div>


            <div class="card-body card-body-contrast">
                @csrf
                @method('PUT')
                <div class="form-group row" v-for="(v,k) in contents">
                    <div class="col-12 col-md-9">
        <textarea rows="3" class="form-control form-control" v-model="v.content">
            </textarea>
                        <button type="button" class="btn btn-danger" @click="del(k)">删除回复内容</button>
                        &nbsp;&nbsp;
                        <a href="javascript:;">
                            表情
                        </a>
                    </div>
                </div>
                <textarea name="content" hidden>@{{ contents }}</textarea>
            </div>
            <div class="card-footer text-muted">
                <button class="btn btn-secondary" type="button" @click="add()">添加回复内容</button>
            </div>
            <div class="card-footer text-muted">
                <button class="btn btn-primary offset-sm-2">保存提交</button>
            </div>
        </div>
    </form>
@endsection

@section('script')
    <script>
        require(['vue', 'hdjs'], function (vue, hdjs) {
            new vue({
                el: '#content',
                data: {
                    contents: {!! $base_reply['content'] !!}
                },
                mounted() {
                    this.biaoqing();
                },
                updated(){
                    this.biaoqing();
                },
                methods: {
                    biaoqing() {
                        var This = this;
                        //循环所有的textarea,有几个,就找到对应的文本框里面的a标签用来绑定
                        $('textarea').each(function () {
                            hdjs.emotion({
                                //点击的元素，可以为任何元素触发
                                btn: $(this).next().next('a'),
                                //选中图标后填入的文本框
                                input: $(this),
                                //选择图标后执行的回调函数
                                callback: function (con, btn, input) {
                                    //获取当前点击使用emoji图标的输入框是哪个
                                    var index = $(input).index('#content textarea');
                                    This.contents[index].content = $(input).val();
                                }
                            });

                        })

                    },
                    //添加关键词
                    add() {
                        this.contents.push({content: ''});
                    },
                    //删除关键词
                    del(k) {
                        this.contents.splice(k, 1);
                    }
                }
            })
        })
    </script>
@endsection
